<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/login.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
    </script>
</head>
<body>

<form action="${pageContext.request.contextPath}/home" method="post" class="login-form">
    <h1>登录</h1>

    <div class="txtb">
        <input type="text"/>
        <span data-placeholder="Username"></span>
    </div>

    <div class="txtb">
        <input type="password"/>
        <span data-placeholder="Password"></span>
    </div>

    <input type="submit" class="logbtn" value="登录"/>

<%--    <div class="bottom-text">--%>
<%--        Don't have account? <a href="#">Sign up</a>--%>
<%--    </div>--%>

</form>

<script type="text/javascript">
    $(".txtb input").on("focus", function () {
        $(this).addClass("focus");
    })
    $(".txtb input").on("blur", function () {
        if ($(this).val() == "") {
            $(this).removeClass("focus");
        }
    })
</script>

</body>
</html>
